<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
        }
        .bg{
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="box">
        <h1>1. 双花括号渲染数据</h1>
        <p>{{ inf }}</p>

        <h1>2. v-html 指令渲染：可以解析标签的指令</h1>
        <p v-html="msg"></p>

        <h1>3. v-text 渲染数据</h1>
        <p v-text="msg">msg</p>
        
        <h1>4. v-bind 绑定属性值的；可以简写成 :属性名="xx"</h1>
        <p class="red">天灾还是人祸？谁最想“炸”掉北溪</p>
        <p v-bind:class="clname">天灾还是人祸？谁最想“炸”掉北溪</p>
        <!-- 1.class 可以写成字符串 -->
        <p :class="clname">天灾还是人祸？谁最想“炸”掉北溪</p>
        <!-- 2.class 可以写成对象 true：启用该样式，false：不启用 -->
        <p :class="{red:true,bg:false}">实拍飓风伊恩袭美：鲨鱼游上街道</p>
        <p :class="{red:isred,bg:isbg}">实拍飓风伊恩袭美：鲨鱼游上街道</p>
        <!-- 3.class 可以写成数组 -->
        <p class="red bg">女子玩羊了个羊看广告被骗9万</p>
        <p :class="['red','bg']">女子玩羊了个羊看广告被骗9万</p>
        <p :class="className">女子玩羊了个羊看广告被骗9万</p>

        <img :src="imgurl" alt="">
        
        <h1>5. v-on 绑定事件，简写  @click="事件处理函数"</h1>
        <p>商品数量：{{ total }}</p>
        <button v-on:click="add">加1</button>
        <!-- v-model 双向数据绑定 -->
        <input type="text" v-model="total">
        <button @click="cut">减1</button>


    </div>
</body>
<!-- 1.引入vue文件 -->
<script src="./vue.js"></script>
<script>
    new Vue({
        el : '#box',//设置vue的挂载点
        data : {
            inf : '菲律宾将遣返4万名中国公民',
            msg : '<b>这是国庆前夕的香港街头</b>',
            clname : 'red',
            isred : true,
            isbg : true,
            className : ['red','bg'],
            imgurl : 'https://st0.dancf.com/csc/3880/topics/11222/20220118-104802-c2cc.jpg?x-oss-process=image/resize,w_368/interlace,1,image/format,webp',
            total : '1'

        },
        methods : {
            //es3的写法
            add : function() {
                // console.log('加法运行')
                //方法里面是可以对data里面的数据进行操控的。通过this找到数据，这些数据都是可读可写的
                // console.log(this.total)
                // this.total = 666
                
                //限制库存量 6
                if(this.total < 6) {
                    this.total = this.total * 1 + 1;
                }else{
                    alert('库存量最多是6份')
                }
            },
            //es6的写法
            cut() {
                //最少买一份
                if(this.total > 1) {
                    this.total = this.total - 1;
                }else{
                    alert('最少买一份')
                }
                
            }
        }
    })



</script>
</html>